<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="下级账单管理" name="one">
            <xzgl :zhtype="zhtype" :rules="rules" />
          </el-tab-pane>
          <el-tab-pane label="充值扣款审核" name="two">
            <czkk :zhtype="zhtype" :rules="rules" />
          </el-tab-pane>
          <el-tab-pane label="交易流水查询" name="three">
            <jyls :zhtype="zhtype" :rules="rules" />
          </el-tab-pane>
          <el-tab-pane label="交易报表" name="four">
            <jybb :zhtype="zhtype" :rules="rules" />
          </el-tab-pane>
          <el-tab-pane label="我的账户" name="five">
            <wdzh :rules="rules" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

  </div>
</template>
<script>

import czkk from './components/czkk'
import xzgl from './components/xzgl'
import jyls from './components/jyls'
import jybb from './components/jybb'
import wdzh from './components/wdzh'

export default {
  components: {
    czkk, xzgl, jyls, jybb, wdzh
  },
  data() {
    return {
      rules: {
        Time: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
        networkNameId: [
          { required: true, message: '请选择网点', trigger: 'change' }
        ]
      },
      activeName: 'one',
      // 账户类型
      zhtype: [
        { value: 0, label: '全部' },
        { value: 1, label: '网点' },
        { value: 2, label: '员工' },
        { value: 3, label: '客户' }
      ]

    }
  },

  methods: {
    handleClick(tab, event) {
      // console.log(tab, event)
    }
  }
}
</script>
<style lang="scss" scoped>
@import url("./css/css.css");
</style>
